<template>
	<div>
		<div>
			<Form  inline>
				<FormItem>
					<Input type="text" v-model="params.contactName" placeholder="请输入联系人">
					   <Icon type="ios-cube-outline" slot="prepend"></Icon>
					</Input>
				</FormItem>
				<FormItem>
					<Input type="text" v-model="params.contactMobile" placeholder="请输入联系电话">
					   <Icon type="ios-cube-outline" slot="prepend"></Icon>
					</Input>
				</FormItem>

				<FormItem>
					<Button type="primary" icon="ios-search-outline" style="margin-right: 10px;" @click="search">查询</Button>
				</FormItem>
			</Form>
		</div>

		<Table border :columns="columns" :data="data"></Table>
	    <div style="margin: 10px;overflow: hidden">
	        <div style="float: right;">
	            <Page :total="total" :current="params.current"   @on-change="changePage" ></Page>
	        </div>
	    </div>

			
	</div>

</template>
<script>
	export default {
		data() {
			return {
				categoryList:null,
				params:{
					current:1,
					size:10,
					contactMobile:'',
					contactName:'',
				},
				total:0,
				columns: [				
					{
						title: '联系人',
						key: 'contactName',
						align: 'center'
					},
					{
						title: '联系电话',
						key: 'contactMobile',
						align: 'center',
					},					

					{
						title: '留言内容',
						key: 'message'
					},
					{
						title: '留言时间',
						key: 'creatTime'
					}					
				],
				data: []
			}
		},
		methods: {
            changePage (res) {
            	this.params.current=res
                this.onLoad()
            },
			search(){
				this.params.current=1
				this.onLoad()
			},
			onLoad() {		
				this.$Axios.Post(this.$baseUrl+'message/page',this.params).then(res => {					
					this.data = res.records
					this.total=res.total
				})
			}
		},
		mounted() {
			
			this.onLoad()
		}
	}
</script>
<style scoped="">
	.fuzhu {
		margin-left: 10px;
		color: #BCBCBC;
	}
	
	.img-item {
		width: 100px;
		border: 1px solid #BCBCBC;
		float: left;
		margin-right: 4px;
	}
	
	.wrap-head {
		width: 100%;
		height: 100px;
	}
	
	.img-item img {
		width: 100%;
		height: 100%;
	}
	
	.wrap-foot {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 4px 0;
		cursor: pointer;
	}
</style>